<template>
    <div class="wrap-content">
        <h1>Vite + Vue3 + Typescript + Elment-Plus 企业最佳实践</h1>
        <button
            style="
                padding: 4px 20px;
                color: white;
                background-color: #1a76ff;
                border-radius: 6px;
            "
            @click="toggleModal"
        >
            示例，点我看看
        </button>
        <img :src="gitIcon" alt="" />
        <TeleportDemo v-model="isModalVisible" />
    </div>
</template>

<script lang="ts" setup>
import gitIcon from "@/assets/git.png";
import { ref, watch, reactive } from "vue";
import TeleportDemo from "./components/teleport-demo.vue";
const obj1 = reactive({
    id: 1,
    name: "dawei",
});
const obj2 = ref({
    id: 2,
    name: "dawei",
});
const isModalVisible = ref(false);
console.log(obj1);
console.log(obj2);
console.log(isModalVisible);
watch(isModalVisible, (val) => {
    console.log(val);
});
const toggleModal = () => {
    isModalVisible.value = true;
};
</script>
<style lang="less" scoped>
.wrap-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    height: max-content;
    flex-direction: column;
}

img {
    animation: route 5s infinite;
}
</style>
